<template>
  <div id="EXA"></div>
</template>

<script setup>
import * as d3 from 'd3'
import { onMounted } from 'vue'

onMounted(() => {
  drawPie()
  // drawStack()
  drawPath()
})

function drawPie() {
  var dataset = [5, 10, 20, 45, 6, 25]
  var pie = d3.pie();

  const w = 200, h = 200
  let outerRadius = w / 2
  let innerRadius = w / 5
  // 定义弧形扇子  
  let arc = d3.arc()
    .innerRadius(innerRadius)
    .outerRadius(outerRadius)

  // 创建svg元素
  var svg = d3.select('#EXA')
    .append('svg')
    .attr('class', 'svg')
    .attr('width', w + 50)
    .attr('height', h)

  // 准备分组
  var arcs = svg.selectAll('g.arc')
    .data(pie(dataset))
    .enter()
    .append('g')
    .attr('class', 'arc')
    .attr('transform', `translate(${outerRadius}, ${outerRadius})`)

  var color = d3.schemeCategory10
  arcs.append("path")
    .attr("d", arc)
    .attr("fill", function (d, i) { return color[i] })
    .on('mouseover', function (e) {
      d3.select(this).attr('opacity', '0.8')
    })
    .on('mouseout', function (e) {
      d3.select(this).attr('opacity', '1')
    })

  arcs.append("text")
    .attr('transform', function (d) { return "translate(" + arc.centroid(d) + ")" })
    .attr('text-anchor', 'middle')
    .attr('fill', '#fff')
    .attr('class', 'pieText')
    .text(function (d) { return d.value + '个' })

  svg.append('text').text('饼图')
    .attr('x', 190)
    .attr('y', 170)

  //end

}

function drawStack() {
  var dataset = [
    [
      { x: 0, y: 5 },
      { x: 1, y: 4 },
      { x: 2, y: 2 },
      { x: 3, y: 7 },
    ],
    [
      { x: 0, y: 10 },
      { x: 1, y: 12 },
      { x: 2, y: 19 },
      { x: 3, y: 23 },
      { x: 4, y: 17 }
    ],
    [
      { x: 0, y: 22 },
      { x: 1, y: 28 },
      { x: 2, y: 32 },
      { x: 3, y: 35 },
      { x: 4, y: 43 }
    ]
  ]
  var stack = d3.stack()
  stack(dataset)

  var rect = groups.selectAll('rect')
    .data(function (d) { return d })
    .enter()
    .append('rect')
    .attr('x', function () { return xScale(i) })
    .attr('y', function () { return yScale(d.y0) })
    .attr("width", xScale.rangeBand());

}

function drawPath() {
  let w = 800, h = 700

  var svg = d3.select('#EXA').append('svg')
    .attr('class', 'svg')
    .attr('width', w)
    .attr('height', h)

  var projection = d3.geoMercator()
    .center([112, 26.9])
    .scale(6000)
    .translate([w / 2, w / 2]);

  const colors = d3.scaleOrdinal(d3.schemeBlues[9])
  var path = d3.geoPath().projection(projection)
  d3.json("http://127.0.0.1:3000/hunan.json").then(data => {
    svg.selectAll("g")
      .data(data.features)
      .enter()
      .append("g")
      .append('path')
      .attr('d', path)
      .attr('fill', function (d, i) {
        const random = parseInt(Math.random() * 10)
        return colors(random)
      })
      .attr('stroke', 'rgba(0,0,0, 0.1)')
      .attr('stroke-width', 1)
      .on('click', e => {
        console.log(e, 666)
      })

    svg.selectAll('g').append('text')
      .text(d=>{ return d.properties.name})
      .attr('class', 'map-text')
      .attr('fill', '#fff')
      .attr('text-anchor', 'middle')
      .attr('x', d=>{
        let position =  projection(d.properties.centroid || [0,0])
        return position[0]
      })
      .attr('y', d=>{
         let position =  projection(d.properties.centroid || [0,0])
        return position[1]
      })
  })




}


</script>

<style>
.pieText {
  font-weight: bold;
  font-size: 10px;
}

path:hover {
  opacity: 0.8;
}
.map-text {
  font-size: 14px;
  text-shadow:1px 1px rgba(0,0,0,0.8);  
}
</style>